<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('产品使用单位列表')" />
    <th:block th:include="include :: ztree-css" />
    <style>
        input[type=button]{
            background-repeat: no-repeat;
            -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="form-group" id="authDataScope">
            <label class="col-sm-3 control-label">产品使用单位列表：</label>
            <div class="col-sm-8">
                <label class="check-box">
                    <input type="button" id="checkAll" value="全选/全不选"></label>
                <label class="check-box">
                    <input type="button" name="reset" onclick="reset()" value="重置"></label>
                <div id="deptTrees" class="ztree ztree-border">
                    <li th:each="dept:${deptList}">
                        <span class="button ico_docu"></span>
                        <input type="checkbox" name="dept" th:value="${dept.deptId}" th:text="${dept.deptName}">
                    </li>
                    <li>
                        <span class="button ico_docu"></span>
                        <input type="checkbox" name="dept" th:value="1" th:text="11">
                    </li>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "product/product";

    $(function() {
/*
        var deptList = [[${deptList}]];
        var html = "";
        $.each(deptList,function (index,dept) {
            html += "<li><span class='button ico_docu'></span>" +
                "<input type='checkbox' name='dept' value='"+dept.deptId+"'>"+dept.deptName+"</li>"
        })
        $("#deptTrees").html(html);
*/
        //勾选当前可使用单位
        reset();
    });

    //全选按钮
    $("#checkAll").click(function () {   //全选框按钮点击事件
        //判断当前选择中的元素是否等于总复选框个数
        var flag = $("input[name=dept]:checked").length==$("input[name=dept]").length;

        $("input[name=dept]").each(function () {
            this.checked = !flag;
        });
    });

    //重置按钮
    function reset() {
        var departIds = [[${oProduct}]].departIds;
        var arr = departIds.split(',')
        $("input[name=dept]").each(function () {
            if (arr.indexOf(this.value)>=0) {
                this.checked = true;
            }else {
                this.checked = false;
            }
        });
    }

    function submitHandler () {
        var check_value = [];
        $("input[name=dept]:checked").each(function () {
            check_value.push($(this).val());
        })
        var deptIds = check_value.join(',');
        var productId = [[${oProduct}]].id
        $.operate.save(prefix+"/updateProductDept",{deptIds: deptIds,productId:productId})
    }
</script>
</body>
</html>
